//准备一个考务管理数组
let examArr = [
    { id: 1, name: '语文期中考试', examperiod: '2023语文期中考试', date: '2023-05-20 14:00:00-2023-05-20 16:00:00', Number: '300', Selected: false },
    { id: 2, name: '语文第二次月考', examperiod: '2023语文第二次月考', date: '2023-05-21 14:00:00-2023-05-21 16:00:00', Number: '200', Selected: false },
    { id: 3, name: '语文第一次月考', examperiod: '2023语文第一次月考', date: '2023-05-22 14:00:00-2023-05-22 16:00:00', Number: '100', Selected: false },
    { id: 4, name: '数学第一次月考', examperiod: '2023数学第一次月考', date: '2023-05-23 14:00:00-2023-05-23 16:00:00', Number: '100', Selected: false },
    { id: 5, name: '数学第二次月考', examperiod: '2023数学第二次月考', date: '2023-05-24 14:00:00-2023-05-24 16:00:00', Number: '200', Selected: false },
    { id: 6, name: '数学期中考试', examperiod: '2023数学期中考试', date: '2023-05-25 14:00:00-2023-05-25 16:00:00', Number: '200', Selected: false },
    { id: 7, name: '英语期中考试', examperiod: '2023英语期中考试', date: '2023-05-20 14:00:00-2023-05-20 16:00:00', Number: '300', Selected: false },
    { id: 8, name: '英语第二次月考', examperiod: '2023英语第二次月考', date: '2023-05-21 14:00:00-2023-05-21 16:00:00', Number: '200', Selected: false },
    { id: 9, name: '英语第一次月考', examperiod: '2023英语第一次月考', date: '2023-05-22 14:00:00-2023-05-22 16:00:00', Number: '100', Selected: false },
    { id: 10, name: '物理第一次月考', examperiod: '2023物理第一次月考', date: '2023-05-23 14:00:00-2023-05-23 16:00:00', Number: '100', Selected: false },
    { id: 11, name: '物理第二次月考', examperiod: '2023物理第二次月考', date: '2023-05-24 14:00:00-2023-05-24 16:00:00', Number: '200', Selected: false },
    { id: 12, name: '物理期中考试', examperiod: '2023物理期中考试', date: '2023-05-25 14:00:00-2023-05-25 16:00:00', Number: '200', Selected: false },
];
let id = examArr.length
let oTbody = document.querySelector('tbody');
let oFooter = document.querySelector('footer');
let oPagination = document.querySelector('.pagination');
let hjcx1 = document.querySelector(".hjcx1");
let chongZhi = document.querySelector(".chongzhi");
let examName2 = document.querySelector('#exampleInputName2');
let jEdit = document.querySelector('.j-edit');
let SelectBtn = document.querySelector('.hjpldy1')
let count = 4;//每页的个数
let count2 = 5;//每页的个数
let count3 = 6;//每页的个数
let iNow = 1;//当前页
let show;//显示页面
let i = document.querySelector('i');
let jump = document.querySelector('.jump');
let pageSres = document.querySelector('#pagesres');
let btnPrimary = document.querySelector('.btn-primary');
let myModal = document.querySelector('#myModal');

//内容和页面的渲染
function render(iNow, num, arr) {
    //判断页面显示多少条/每页
    if (show == count) {
        num = count;
    } else if (show == count2) {
        num = count2;
    } else if (show == count3) {
        num = count3;
    } else {
        num = count;
    }
    let str = ''
    let renderDate = arr.slice((iNow - 1) * num, iNow * num);
    for (let i = 0; i < renderDate.length; i++) {
        str += `<tr>
        <td><input type="checkbox" ${renderDate[i].Selected ? "checked" : "a"} /></td>
        <td data-id="${renderDate[i].id}">${renderDate[i].id}</td>
        <td>${renderDate[i].name}</td>
        <td>${renderDate[i].examperiod}</td>
        <td>${renderDate[i].date}</td>
        <td>${renderDate[i].Number}</td>
        <td><button class="btn btn-warning" data-toggle="modal" data-target="#myModal" data-target="#editModal">打印准考证</button></td>
        </tr>`
    }
    oTbody.innerHTML = str;
    //创建页面
    //创建返回上一页
    let pageLeft = `<li>
    <a class="left" href="#" aria-lable="Previous><span  class="left" aria-hidden="true"><span class="glyphicon glyphicon-menu-left"></span></span>
    </a></li>`
    //创建去下一页
    let pagesRight = `<li>
        <a  class="right" href="#" aria-label="Next">
            <span  class="right" aria-hidden="true"><span class="glyphicon glyphicon-menu-right"></span></span>
        </a>
    </li>`
    //如果点击的是页码，在让当前页码显示
    let pagesStr = ''
    for (let i = 1; i <= Math.ceil(arr.length / num); i++) {
        if (iNow == i) {
            pagesStr += `<li class="active yema"><a href="#" class="yema">${i}</a></li>`
        } else {
            pagesStr += `<li class="yema"><a href="#" class="yema">${i}</a></li>`
        }
    }

    //判断是否选中
    let intArr = document.querySelectorAll('[type="checkbox"]')
    for (let i = 0; i < intArr.length; i++) {

        intArr[i].addEventListener('click', function () {
            let ider = examArr[i].id
            //取数据的id
            //循环数据
            //循环中 数据的id等于当前的id 然后就改变selected
            for (let i = 0; i < examArr.length; i++) {
                if (ider == examArr[i].id) {
                    examArr[i].Selected = true;
                    return
                }
            }
        })
    }

    oPagination.innerHTML = pageLeft + pagesStr + pagesRight;
}
//页面加载渲染数据111
render(iNow, show, examArr);
window.onload = function () {
    let sp12 = document.querySelector('#sp12')
    let span12 = document.querySelector('#span12')
    // sp12.parentNode.style.background = '#fff'
    // sp12.style.color = 'rgb(48, 62, 96)'
    // span12.parentNode.style.background = 'rgb(48, 62, 96)';
    // span12.style.color = '#fff';
    //批量选中

}
//分页功能
oPagination.addEventListener('click', function (e) {
    if (e.target.className.includes('left')) {//向左
        if (iNow > 1) {
            iNow--;
            render(iNow, show, examArr);
        }
    } else if (e.target.className.includes('right')) {//向右
        if (iNow < Math.ceil(examArr.length / count)) {
            iNow++;
            render(iNow, show, examArr);
        }
    } else if (e.target.className.includes('yema')) {//数字键
        iNow = e.target.innerText.trim();
        render(iNow, show, examArr);
    }
});
//跳转的功能
function topage() {
    let pages = Math.ceil(examArr.length / count);
    if (1 <= jump.value && jump.value <= pages) {
        render(jump.value, show, examArr);
    }
}
i.addEventListener('click', topage);
jump.addEventListener('keydown', topage);
jump.addEventListener('blur', topage);
//增加页数显示条件改变的功能
function changepage() {
    let src = pageSres.value
    switch (src) {
        case "5条/页":
            show = count2;
            render(iNow, show, examArr);
            break;
        case "6条/页":
            show = count3;
            render(iNow, show, examArr);
            break;
        case "4条/页":
            show = count;
            render(iNow, show, examArr);
            break;
    }
}
pageSres.addEventListener('change', changepage)
//查询功能
hjcx1.addEventListener('click', function () {
    //准备一个查询新数组
    let xArr = [];
    //获取考试期次的字符串
    let str = examName2.value
    //获取考试名称下拉菜单
    let str2 = jEdit.value;
    for (let i = 0; i < examArr.length; i++) {
        if (examArr[i].examperiod.includes(str2) && examArr[i].name.includes(str)) {//符合条件的
            xArr.push(examArr[i])
        }
    }
    iNow=1;
    render(iNow, show, xArr)
})
//重置功能
chongZhi.addEventListener('click', function () {
    window.location.href = "Examination.html"
})
//弹出框初始化设置
$(function () {
    $('[data-toggle="popover"]').popover()
})
//当点击模态框确定的时候
btnPrimary.addEventListener('click', function () {
    alert('打印成功')
})
//批量选择
SelectBtn.addEventListener('click', function () {
    // let intArr = document.querySelectorAll('[type="checkbox"]');
    // for (let i = 0; i < intArr.length; i++) {
    //     let check=examArr[i].Selected
    //     if(examArr)
    // }
})
//批量删除
let delId;
let n=examArr.length-1;
SelectBtn.addEventListener('click', function () {
    for (let i = 0; i < examArr.length; i++) {
        if (examArr[i].Selected == true) {
            delId = examArr[i].id
        }
        for (let j = 0; j < examArr.length; j++) {
            if (delId == examArr[j].id) {
                examArr.splice(j, 1);
                
            }
        }
    }
    let renderdate = examArr.slice((iNow - 1) * count, iNow * count);
    if (renderdate.length == 0 && iNow > 1) {
        iNow--;
    }
    render(iNow, show, examArr);
})